<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叮当快药</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入字体图标样式表 iconfont.css -->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- 引入单位转换 -->
    <script src="js/rem.js"></script>
    <!-- 引入首页样式表 index.css -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <div class="top">
            <span class="iconfont icon-zu"></span>
            <a href="#">送至:欧德宝汽车城23-24国机丰盛广汽丰....&emsp;</a>
            <span class="iconfont icon-xinxi"></span>
        </div>
        <div class="bottom">
            <a href="#"><img src="images/1.jpg" alt=""></a>
            <input type="text" placeholder="&emsp;&emsp;&emsp;搜索药品、症状、品牌">
            <a href="#"><span class="iconfont icon-saomiao"></span></a>
        </div>
    </div>
    <!-- 主体部分 -->
    <div id="main">
        <!-- 轮播 -->
        <div class="banner">
            <img src="images/2.jpg" alt="">
        </div>
        <!-- 分类 -->
        <div class="projects">
            <div>
                <img src="images/3.jpg" alt="">
                <a href="#">叮当头条</a>
            </div>
            <div>
                <img src="images/4.jpg" alt="">
                <a href="#">药师指导</a>
            </div>
            <div>
                <img src="images/5.jpg" alt="">
                <a href="#">海外购</a>
            </div>
            <div>
                <img src="images/6.jpg" alt="">
                <a href="#">医生在线</a>
            </div>
            <div>
                <img src="images/23.jpg" alt="">
                <a href="#">会员中心</a>
            </div>
        </div>
        <!-- 图片 -->
        <div class="pic">
            <img src="images/7.jpg" alt="">
        </div>
        <!-- 公告 -->
        <div class="announcement">
            <img src="images/8.jpg" alt="">
            <p>提供24小时快速配送服务。</p>
        </div>
        <!-- 28分钟快送 -->
        <div class="quicklySend">
            <div class="title">
                <div>
                    <img src="images/9.jpg" alt="">
                    <p>28分钟快送</p>
                </div>
                <div>
                    <img src="images/9.jpg" alt="">
                    <p>满28免运费</p>
                </div>
                <div>
                    <img src="images/9.jpg" alt="">
                    <p>24小时服务</p>
                </div>
            </div>
            <div class="content">
                <div>
                    <div class="left">
                        <span>28分钟快送</span>
                        <h1>医院常开药品</h1>
                        <p>部分第2件8折</p>
                    </div>
                    <div class="right">
                        <a href="#"> <img src="images/10.jpg" alt=""></a>
                    </div>
                </div>
                <div>
                    <div class="left">
                        <span>28分钟快送</span>
                        <h1>美妆个护</h1>
                        <p>部分第2件5折</p>
                    </div>
                    <div class="right">
                        <a href="#"> <img src="images/11.jpg" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 药品 -->
        <div class="drug">
            <div>
                <img src="images/12.jpg" alt="">
                <a href="#">感冒发烧</a>
            </div>
            <div>
                <img src="images/13.jpg" alt="">
                <a href="#">清热解毒</a>
            </div>
            <div>
                <img src="images/14.jpg" alt="">
                <a href="#">咳嗽用药</a>
            </div>
            <div>
                <img src="images/15.jpg" alt="">
                <a href="#">皮肤用药</a>
            </div>
            <div>
                <img src="images/16.jpg" alt="">
                <a href="#">肠胃用药</a>
            </div>
            <div>
                <img src="images/17.jpg" alt="">
                <a href="#">性福生活</a>
            </div>
            <div>
                <img src="images/18.jpg" alt="">
                <a href="#">滋补调养</a>
            </div>
            <div>
                <img src="images/19.jpg" alt="">
                <a href="#">功能保健</a>
            </div>
        </div>
        <!-- 产品详情 -->
        <div class="productDetails">
            <div>
                <div class="left">
                    <a href="#"><img src="images/20.jpg" alt=""></a>
                </div>
                <div class="right">
                    <h1><span>28分钟</span>恒温持久发热给你温暖呵护</h1>
                    <p>[20片装] [小林暖宝宝]- -次性使用取暖片(即贴)10片x2</p>
                    <a href="#">低价换购</a>
                    <a href="#">1元换购</a>
                    <a href="#">立省17.50元</a>
                    <br>
                    <span>￥54.90</span>
                    <span>￥72.40</span>
                    <div><span class="iconfont icon-gouwuche"></span></div>
                </div>
            </div>
            <div>
                <div class="left">
                    <a href="#"><img src="images/21.jpg" alt=""></a>
                </div>
                <div class="right">
                    <h1><span>28分钟</span>泡着喝维C&emsp;增强抵抗力</h1>
                    <p>【70片】[力度伸]维生素c泡腾片(橙味)1gx15片x2支x2盒+1g...</p>
                    <a href="#">低价换购</a>
                    <a href="#">1元换购</a>
                    <br>
                    <span>￥148.80</span>
                    <div><span class="iconfont icon-gouwuche"></span></div>
                </div>
            </div>
        </div>
        <!-- 定坤丹图片 -->
        <div class="picDingKd">
            <a href="#"><img src="images/22.jpg" alt=""></a>
        </div>
    </div>
    <!-- 底部导航 -->
    <div id="footer">
        <ul>
            <li>
                <span class="iconfont icon-fangzi"></span>
                <a href="#">叮当快药</a>
            </li>
            <li>
                <span class="iconfont icon-yao"></span>
                <a href="#">叮当商城</a>
            </li>
            <li>
                <span class="iconfont icon-gouwuche"></span>
                <a href="#">清单列表</a>
            </li>
            <li>
                <span class="iconfont icon-wo"></span>
                <a href="#">我的</a>
            </li>
        </ul>
    </div>
</body>
</html>